<script setup lang="ts">
import { currentGET } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { computed, onMounted, reactive } from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com"
import { ref, inject } from 'vue'
import { PopupType } from '../../index.d'

const settingStore = useSettingStore();
const { indexConfig } = storeToRefs(settingStore);
const props = defineProps({
    showLength: {
        type: [Number ,String],
        default: 0
    },
    minLength: {
        type: [Number, String],
        default: ''
    },
    maxLength: {
        type: [Number, String],
        default: ''
    },
})
const state = reactive<any>({
    list: [],
    showLength: props.showLength,
    minLength: props.minLength,
    maxLength: props.maxLength,
});

const getData = () => {
    currentGET("leftBottom", { limitNum: 20 }).then((res) => {
        console.log("devices提醒", res);
        if (res.success) {
            state.list = res.data.list;
        } else {
            window.$message({
                text: res.msg,
                type: "warning",
            });
        }
    });
};
const addressHandle = (item: any) => {
    let name = item.provinceName;
    if (item.cityName) {
        name += "/" + item.cityName;
        if (item.countyName) {
            name += "/" + item.countyName;
        }
    }
    return name;
};
const comName = computed(() => {
    if (indexConfig.value.leftBottomSwiper) {
        return SeamlessScroll
    } else {
        return EmptyCom
    }
})
onMounted(() => {
    getData();
});
const emit = defineEmits(['cellClick'])
const showPopupFun = (item: { [key: string]: any }) => {
    emit('cellClick',item)
}

const colorList = ref<string[]>(['rgb(80, 255, 205)', 'rgb(80, 187, 255)', 'rgb(197, 165, 90)', 'rgb(190, 191, 255)','rgb(168, 79, 121)'])
</script>

<template>
    <div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
        <ul class="left_boottom">
            <li class="left_boottom_item" v-for="(item, i) in state.list" :key="i" @click="showPopupFun(item)">
                <template v-if="i < showLength || ( i>= minLength && i <= maxLength )">
                    <span class="first" :style="{ 'color': i < 5 ? colorList[i] : '#fff' }">TOP{{ i + 1
                        }}</span>
                    <span class="second el-tooltip">
                        <el-tooltip :content="'物业管理问题'" placement="top">
                            物业管理问题
                        </el-tooltip>
                    </span>
                    <span class="third">{{ i +133 }}</span>
                </template>
            </li>
        </ul>
    </div>
</template>

<style scoped lang="less">
.left_boottom_wrap {
    overflow: hidden;
    width: 100%;
    //height: 100%;
}

.doudong {
    overflow: hidden;
    backface-visibility: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.left_boottom {
    width: 100%;
    height: 100%;
    font-family: "微软雅黑";
    overflow-y: scroll;
    .left_boottom_item {
        display: flex;
        //align-items: center;
        //justify-content: center;
        font-size: 16px;
        cursor: pointer;
        span{
            line-height: 24px;
            height: 24px;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
            display: inline-block;
        }
        .first{
            width: 40px;
            font-family: '黑体';
        }
        .second{
            width: 70px;
            margin-right: 4px;
        }
        .third {
            width: 32px;
        }
    }
}
</style>
